<template>
 <el-row>
    <el-col :offset="6" :span="11">
    <div>
        <div v-for="problem in problems" :key="problem.id" class="main">
            <div class="problem" @click="details(problem.id)">{{problem.title}}</div>
            <div class="additional">
                <span class="pro">更新时间：{{problem.updateTime | timeFormater}}</span>
                
                <span class="pro">已经有{{problem.reply}}人回答</span>
                <el-divider></el-divider>
            </div>
        </div>
        <el-pagination
                 @current-change="pageChange"
                background
                layout="prev, pager, next"
                :page-size="3"
                :current-page.sync="currentPage"
                :total="total">
         </el-pagination>
    </div>
    </el-col>
 </el-row>
</template>

<script>
import {postRequest,getRequest} from '../utils/api.js'
export default {
    name: 'Problemlist',

    data() {
        return {
            problems:[],
             currentPage:1,//当前页码
            total:0, 
        };
    },

    mounted() {
        getRequest('/qa/problem/searchProblemByTopic?topicId='+this.topicId+"&current="+this.currentPage).then((result) => {
             this.problems=result.data;
             this.total = result.total;
        }).catch((err) => {
            
        });
    },

    props:['topicId'],
    methods: {

        details(id){            
            this.$bus.$emit('problemDetails',id);
        },
            pageChange(current){
             getRequest('/qa/problem/searchProblemByTopic?topicId='+this.topicId+"&current="+this.currentPage).then((result) => {
             this.problems=result.data;
             this.total = result.total;
            }).catch((err) => { });
        },
    },
};
</script>

<style  scoped>
.main{
  
}
.problem{
    font-size: 18px;
    line-height: 40px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing:2px;
}
.additional{
    font-size: 12px;
    letter-spacing:1px;
}
.pro{
    margin-right: 28px;
    
}
</style>